<template>
  <div class="app-container">
    <!-- 搜索表单 - 优化样式 -->
    <div class="search-form-wrapper">
      <div class="search-decoration">
        <i class="el-icon-search"></i>
      </div>
      <el-form ref="queryForm" :model="queryParams" label-width="80px" class="search-form">
        <div class="search-form-row">
          <div class="search-form-item">
            <el-form-item label="家具名称" prop="name">
              <el-input v-model="queryParams.name" placeholder="请输入家具名称" clearable size="small" maxlength="50" show-word-limit />
            </el-form-item>
          </div>
          <div class="search-form-item">
            <el-form-item label="家具类型" prop="typeName">
              <el-input v-model="queryParams.typeName" placeholder="请输入家具类型" clearable size="small" maxlength="30" show-word-limit />
            </el-form-item>
          </div>
          <div class="search-form-item">
            <el-form-item label="家具风格" prop="styleName">
              <el-input v-model="queryParams.styleName" placeholder="请输入家具风格" clearable size="small" maxlength="30" show-word-limit />
            </el-form-item>
          </div>
          <div class="search-form-item">
            <el-form-item label="材质" prop="material">
              <el-input v-model="queryParams.material" placeholder="请输入材质" clearable size="small" maxlength="20" show-word-limit />
            </el-form-item>
          </div>
        </div>
        <div class="search-form-row">
          <div class="search-form-item">
            <el-form-item label="可租库存" prop="availableStock">
              <el-input v-model.number="queryParams.availableStock" placeholder="请输入可租库存" clearable size="small" type="number" min="0" />
            </el-form-item>
          </div>
          <div class="search-form-item">
            <el-form-item label="是否启用" prop="isActive">
              <el-select v-model="queryParams.isActive" placeholder="请选择状态" clearable>
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="search-form-item">
            <el-form-item label="最短租期" prop="minRentDays">
              <el-input v-model.number="queryParams.minRentDays" placeholder="请输入最短租期" clearable size="small" type="number" min="1" />
            </el-form-item>
          </div>
          <div class="search-form-item">
            <el-form-item label="最长租期" prop="maxRentDays">
              <el-input v-model.number="queryParams.maxRentDays" placeholder="请输入最长租期" clearable size="small" type="number" min="1" />
            </el-form-item>
          </div>
        </div>
        <div class="search-actions">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </div>
        <div class="search-tip">根据您的需求快速查找合适的家具租赁选项</div>
      </el-form>
    </div>

    <!-- 操作按钮区 -->
    <el-row :gutter="10" class="mb8 operation-bar">
      <el-col :span="2">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['find:rental:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="2">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['find:rental:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="2">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['find:rental:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="2">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['find:rental:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 数据表格 -->
    <el-table 
      v-loading="loading" 
      :data="rentalList" 
      @selection-change="handleSelectionChange"
      border
      stripe
      :default-sort="{prop: 'lastStockUpdate', order: 'descending'}"
      class="data-table"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="家具ID" align="center" prop="furnitureId" width="100" />
      <el-table-column label="家具名称" align="center" prop="name" width="150" show-overflow-tooltip />
      <el-table-column label="家具类型" align="center" prop="typeName" width="120" />
      <el-table-column label="家具风格" align="center" prop="styleName" width="120" />
      <el-table-column label="材质" align="center" prop="material" width="100" />
      <el-table-column label="尺寸(cm)" align="center" width="180">
        <template slot-scope="scope">
          {{ scope.row.length || 0 }}×{{ scope.row.width || 0 }}×{{ scope.row.height || 0 }}
        </template>
      </el-table-column>
      <el-table-column label="租金(元/月)" align="center" prop="rentPrice" width="120" />
      <el-table-column label="押金(元)" align="center" prop="deposit" width="120" />
      <el-table-column label="可租库存" align="center" prop="availableStock" width="100" />
      <el-table-column label="是否启用" align="center" prop="isActive" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isActive === '1' ? 'success' : 'danger'">
            {{ scope.row.isActive === '1' ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="最后库存更新" align="center" prop="lastStockUpdate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastStockUpdate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="供应商" align="center" prop="supplierName" width="150" show-overflow-tooltip />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['find:rental:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['find:rental:remove']"
          >删除</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="openDetail(scope.row)"
            class="detail-btn"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页控件 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改家具租赁综合对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="家具名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入家具名称" />
        </el-form-item>
        <el-form-item label="家具类型" prop="typeName">
          <el-input v-model="form.typeName" placeholder="请输入家具类型" />
        </el-form-item>
        <el-form-item label="家具风格" prop="styleName">
          <el-input v-model="form.styleName" placeholder="请输入家具风格" />
        </el-form-item>
        <el-form-item label="材质" prop="material">
          <el-input v-model="form.material" placeholder="请输入材质" />
        </el-form-item>
        <el-form-item label="长度(厘米)" prop="length">
          <el-input v-model.number="form.length" placeholder="请输入长度(厘米)" />
        </el-form-item>
        <el-form-item label="宽度(厘米)" prop="width">
          <el-input v-model.number="form.width" placeholder="请输入宽度(厘米)" />
        </el-form-item>
        <el-form-item label="高度(厘米)" prop="height">
          <el-input v-model.number="form.height" placeholder="请输入高度(厘米)" />
        </el-form-item>
        <el-form-item label="重量(千克)" prop="weight">
          <el-input v-model.number="form.weight" placeholder="请输入重量(千克)" />
        </el-form-item>
        <el-form-item label="颜色选项" prop="colorOptions">
          <el-input v-model="form.colorOptions" placeholder="请输入颜色选项" />
        </el-form-item>
        <el-form-item label="颜色代码" prop="colorCodes">
          <el-input v-model="form.colorCodes" placeholder="请输入颜色代码" />
        </el-form-item>
        <el-form-item label="详细描述" prop="description">
          <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="租金(元/月)" prop="rentPrice">
          <el-input v-model.number="form.rentPrice" placeholder="请输入租金(元/月)" />
        </el-form-item>
        <el-form-item label="押金(元)" prop="deposit">
          <el-input v-model.number="form.deposit" placeholder="请输入押金(元)" />
        </el-form-item>
        <el-form-item label="总库存数量" prop="totalStock">
          <el-input v-model.number="form.totalStock" placeholder="请输入总库存数量" />
        </el-form-item>
        <el-form-item label="可租库存数量" prop="availableStock">
          <el-input v-model.number="form.availableStock" placeholder="请输入可租库存数量" />
        </el-form-item>
        <el-form-item label="图片" prop="imageUrls">
          <el-input v-model="form.imageUrls" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="图片描述" prop="imageDescs">
          <el-input v-model="form.imageDescs" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="是否启用" prop="isActive">
          <el-input v-model="form.isActive" placeholder="请输入是否启用" />
        </el-form-item>
        <el-form-item label="最短租赁天数" prop="minRentDays">
          <el-input v-model.number="form.minRentDays" placeholder="请输入最短租赁天数" />
        </el-form-item>
        <el-form-item label="最长租赁天数" prop="maxRentDays">
          <el-input v-model.number="form.maxRentDays" placeholder="请输入最长租赁天数" />
        </el-form-item>
        <el-form-item label="配送费" prop="deliveryFee">
          <el-input v-model.number="form.deliveryFee" placeholder="请输入配送费" />
        </el-form-item>
        <el-form-item label="月维护费" prop="maintenanceFee">
          <el-input v-model.number="form.maintenanceFee" placeholder="请输入月维护费" />
        </el-form-item>
        <el-form-item label="损坏赔偿标准" prop="damageFee">
          <el-input v-model="form.damageFee" placeholder="请输入损坏赔偿标准" />
        </el-form-item>
        <el-form-item label="最后库存更新时间" prop="lastStockUpdate">
          <el-date-picker clearable
            v-model="form.lastStockUpdate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择最后库存更新时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="供应商ID" prop="supplierId">
          <el-input v-model.number="form.supplierId" placeholder="请输入供应商ID" />
        </el-form-item>
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input v-model="form.supplierName" placeholder="请输入供应商名称" />
        </el-form-item>
        <el-form-item label="保修期(天)" prop="warrantyPeriod">
          <el-input v-model.number="form.warrantyPeriod" placeholder="请输入保修期(天)" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 优化后的详情弹窗 -->
    <el-dialog 
      :title="detailTitle" 
      :visible.sync="detailOpen" 
      width="800px"
      append-to-body
      :close-on-click-modal="false"
      :before-close="handleDetailClose"
      class="detail-dialog"
    >
      <el-tabs v-model="activeTab" class="detail-tabs" type="card">
        <!-- 1. 基础信息 -->
        <el-tab-pane label="基础信息" name="base">
          <div class="detail-grid">
            <div class="detail-column">
              <div class="detail-item">
                <span class="detail-label">家具ID：</span>
                <span class="detail-value">{{ detailForm.furnitureId || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">家具名称：</span>
                <span class="detail-value font-bold">{{ detailForm.name || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">家具类型：</span>
                <span class="detail-value">{{ detailForm.typeName || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">家具风格：</span>
                <span class="detail-value">{{ detailForm.styleName || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">材质：</span>
                <span class="detail-value">{{ detailForm.material || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">颜色选项：</span>
                <span class="detail-value">{{ detailForm.colorOptions || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">重量：</span>
                <span class="detail-value">{{ detailForm.weight || 0 }} 千克</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">保修期：</span>
                <span class="detail-value">{{ detailForm.warrantyPeriod || 0 }} 天</span>
              </div>
            </div>
            <div class="detail-column">
              <div class="detail-item">
                <span class="detail-label">尺寸：</span>
                <span class="detail-value">{{ detailForm.size || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">租金(月)：</span>
                <span class="detail-value">{{ detailForm.rentPrice || 0 }} 元</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">租金(年)：</span>
                <span class="detail-value">{{ detailForm.rentPriceYear || 0 }} 元</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">押金：</span>
                <span class="detail-value">{{ detailForm.deposit || 0 }} 元</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">总库存：</span>
                <span class="detail-value">{{ detailForm.totalStock || 0 }} 件</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">可租库存：</span>
                <span class="detail-value">{{ detailForm.availableStock || 0 }} 件</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">供应商：</span>
                <span class="detail-value">{{ detailForm.supplierName || '-' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">状态：</span>
                <span class="detail-value">
                  <el-tag :type="detailForm.isActive === '1' ? 'success' : 'danger'" size="mini">
                    {{ detailForm.isActive === '1' ? '启用' : '禁用' }}
                  </el-tag>
                </span>
              </div>
            </div>
          </div>
          
          <div class="detail-section">
            <h4 class="section-title">详细描述</h4>
            <div class="description-content">
              {{ detailForm.description || '暂无描述信息' }}
            </div>
          </div>
        </el-tab-pane>

        <!-- 2. 图片展示 -->
        <el-tab-pane label="图片展示" name="images">
          <div class="image-gallery">
            <template v-if="imageList.length > 0">
              <div class="image-item" v-for="(img, index) in imageList" :key="index">
                <el-image 
                  :src="img.url" 
                  :alt="img.desc || '家具图片'"
                  fit="contain"
                  class="preview-img"
                  @click="previewImage(img.url)"
                >
                  <div slot="error" class="image-placeholder">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
                <p class="image-desc">{{ img.desc || `图片 ${index + 1}` }}</p>
              </div>
            </template>
            <template v-else>
              <div class="no-image">
                <i class="el-icon-picture-outline"></i>
                <p>暂无图片信息</p>
              </div>
            </template>
          </div>
        </el-tab-pane>

        <!-- 3. 租赁规格 -->
        <el-tab-pane label="租赁规格" name="spec">
          <div class="spec-container">
            <el-radio-group v-model="selectedSpec" class="spec-group">
              <el-radio :label="1" class="spec-item">
                <span class="spec-text">租期1年</span>
                <span class="spec-price">总价: {{ (detailForm.rentPrice || 0) * 12 * 1 }} 元</span>
              </el-radio>
              <el-radio :label="1.5" class="spec-item">
                <span class="spec-text">租期1.5年</span>
                <span class="spec-price">总价: {{ (detailForm.rentPrice || 0) * 12 * 1.5 }} 元</span>
              </el-radio>
              <el-radio :label="2" class="spec-item">
                <span class="spec-text">租期2年</span>
                <span class="spec-price">总价: {{ (detailForm.rentPrice || 0) * 12 * 2 }} 元</span>
              </el-radio>
            </el-radio-group>
            
            <div class="spec-extra-info">
              <div class="info-item">
                <i class="el-icon-info"></i>
                <span>最短租赁天数: {{ detailForm.minRentDays || 0 }} 天</span>
              </div>
              <div class="info-item">
                <i class="el-icon-info"></i>
                <span>最长租赁天数: {{ detailForm.maxRentDays || 0 }} 天</span>
              </div>
            </div>
            
            <el-button 
              type="primary" 
              size="mini" 
              class="spec-confirm-btn"
              @click="confirmSpec"
              :disabled="!detailForm.availableStock || detailForm.availableStock <= 0"
            >
              确认选择
              <template v-if="!detailForm.availableStock || detailForm.availableStock <= 0">
                (暂无库存)
              </template>
            </el-button>
          </div>
        </el-tab-pane>

        <!-- 4. 费用明细 -->
        <el-tab-pane label="费用明细" name="fee">
          <div class="fee-container">
            <div class="fee-item">
              <span class="fee-label">租赁押金：</span>
              <span class="fee-value">{{ detailForm.deposit || 0 }} 元</span>
            </div>
            <div class="fee-item">
              <span class="fee-label">租赁期限：</span>
              <span class="fee-value">{{ selectedSpec }} 年</span>
            </div>
            <div class="fee-item">
              <span class="fee-label">租金总额：</span>
              <span class="fee-value">{{ (detailForm.rentPrice || 0) * 12 * selectedSpec }} 元</span>
            </div>
            <div class="fee-item">
              <span class="fee-label">配送费：</span>
              <span class="fee-value">{{ detailForm.deliveryFee || 0 }} 元</span>
            </div>
            <div class="fee-item">
              <span class="fee-label">月维护费：</span>
              <span class="fee-value">{{ detailForm.maintenanceFee || 0 }} 元/月</span>
            </div>
            <div class="fee-item">
              <span class="fee-label">总维护费：</span>
              <span class="fee-value">{{ (detailForm.maintenanceFee || 0) * 12 * selectedSpec }} 元</span>
            </div>
            <div class="fee-item fee-divider">
              <span class="fee-label">合计费用：</span>
              <span class="fee-value total-fee">
                {{ calculateTotalFee() }} 元
              </span>
            </div>
            <el-button 
              type="primary" 
              size="mini" 
              class="pay-btn"
              :disabled="!detailForm.availableStock || detailForm.availableStock <= 0"
              @click="generateOrder"
            >
              生成支付订单
              <template v-if="!detailForm.availableStock || detailForm.availableStock <= 0">
                (暂无库存)
              </template>
            </el-button>
          </div>
        </el-tab-pane>

        <!-- 5. 租赁规则 -->
        <el-tab-pane label="租赁规则" name="rules">
          <div class="rules-container">
            <div class="rule-section">
              <h4 class="rule-title">配送与安装</h4>
              <p class="rule-content">• 配送范围：全国主要城市均可配送</p>
              <p class="rule-content">• 配送时效：下单后3-5个工作日送达</p>
              <p class="rule-content">• 安装服务：提供免费上门安装服务</p>
            </div>
            
            <div class="rule-section">
              <h4 class="rule-title">损坏赔偿</h4>
              <p class="rule-content">• 赔偿标准：{{ detailForm.damageFee || '按实际损坏程度评估' }}</p>
              <p class="rule-content">• 自然损耗：正常使用中的轻微损耗无需赔偿</p>
              <p class="rule-content">• 人为损坏：需按照赔偿标准进行赔偿</p>
            </div>
            
            <div class="rule-section">
              <h4 class="rule-title">退租说明</h4>
              <p class="rule-content">• 提前退租：需提前15天申请，押金不退</p>
              <p class="rule-content">• 到期退租：需提前7天预约，检查无损坏后退还押金</p>
              <p class="rule-content">• 物品返还：需保持物品基本完好，清洁干净</p>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      
      <!-- 图片预览弹窗 -->
      <el-dialog 
        :visible.sync="previewVisible" 
        width="80%" 
        append-to-body 
        title="图片预览"
        class="image-preview-dialog"
      >
        <img 
          :src="previewImageUrl" 
          alt="图片预览" 
          class="preview-img-large"
          style="width: 100%;"
        >
      </el-dialog>

      <div slot="footer" class="dialog-footer">
        <el-button @click="detailOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入必要的API和工具函数
import { listRental, getRental, delRental, addRental, updateRental } from "@/api/find/rental";
import { parseTime } from "@/utils/ruoyi";
import './search-styles.css';

export default {
  name: "Rental",
  data() {
    return {
      // 原有数据
      loading: true,
      ids: [],
      single: true,
      multiple: true,
      showSearch: true,
      total: 0,
      rentalList: [],
      title: "",
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        typeName: null,
        styleName: null,
        material: null,
        availableStock: null,
        imageUrls: null,
        imageDescs: null,
        isActive: null,
        minRentDays: null,
        maxRentDays: null,
        deliveryFee: null,
        maintenanceFee: null,
        damageFee: null,
      },
      form: {},
      rules: {
        name: [
          { required: true, message: "家具名称不能为空", trigger: "blur" }
        ],
        typeName: [
          { required: true, message: "家具类型不能为空", trigger: "blur" }
        ],
        styleName: [
          { required: true, message: "家具风格不能为空", trigger: "blur" }
        ],
        rentPrice: [
          { required: true, message: "租金(元/月)不能为空", trigger: "blur" }
        ],
        deposit: [
          { required: true, message: "押金(元)不能为空", trigger: "blur" }
        ],
        totalStock: [
          { required: true, message: "总库存数量不能为空", trigger: "blur" }
        ],
        availableStock: [
          { required: true, message: "可租库存数量不能为空", trigger: "blur" }
        ],
      },
      // 详情弹窗相关数据
      detailOpen: false,
      detailTitle: "家具租赁详情",
      activeTab: "base",
      selectedSpec: 1,
      detailForm: {},
      // 图片相关
      imageList: [],
      previewVisible: false,
      previewImageUrl: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 原有方法
    getList() {
      this.loading = true;
      listRental(this.queryParams).then(response => {
        this.rentalList = response.rows || []; // 防止response.rows为undefined
        this.total = response.total || 0; // 防止total为undefined
        this.loading = false;
      }).catch(error => {
        console.error("获取数据失败:", error);
        this.loading = false;
        this.rentalList = [];
        this.total = 0;
      });
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    reset() {
      this.form = {
        furnitureId: null,
        name: null,
        typeName: null,
        styleName: null,
        material: null,
        length: null,
        width: null,
        height: null,
        weight: null,
        colorOptions: null,
        colorCodes: null,
        description: null,
        rentPrice: null,
        deposit: null,
        totalStock: null,
        availableStock: null,
        imageUrls: null,
        imageDescs: null,
        isActive: null,
        minRentDays: null,
        maxRentDays: null,
        deliveryFee: null,
        maintenanceFee: null,
        damageFee: null,
        createdAt: null,
        updatedAt: null,
        lastStockUpdate: null,
        supplierId: null,
        supplierName: null,
        warrantyPeriod: null
      };
      if (this.$refs.form) { // 检查$refs.form是否存在
        this.$refs.form.resetFields();
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      if (this.$refs.queryForm) { // 检查$refs.queryForm是否存在
        this.$refs.queryForm.resetFields();
      }
      this.handleQuery();
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.furnitureId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加家具租赁综合";
    },
    handleUpdate(row) {
      this.reset();
      // 处理单行修改和批量修改的情况
      const furnitureId = row ? row.furnitureId : (this.ids.length > 0 ? this.ids[0] : null);
      if (!furnitureId) {
        this.$message.warning("请选择需要修改的记录");
        return;
      }
      
      getRental(furnitureId).then(response => {
        this.form = response.data || {}; // 防止data为undefined
        this.open = true;
        this.title = "修改家具租赁综合";
      }).catch(error => {
        console.error("获取详情失败:", error);
        this.$message.error("获取详情失败，请重试");
      });
    },
    submitForm() {
      if (!this.$refs.form) return; // 防止$refs.form不存在
      
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.furnitureId != null) {
            updateRental(this.form).then(response => {
              this.$message.success("修改成功");
              this.open = false;
              this.getList();
            }).catch(error => {
              console.error("修改失败:", error);
              this.$message.error("修改失败，请重试");
            });
          } else {
            addRental(this.form).then(response => {
              this.$message.success("新增成功");
              this.open = false;
              this.getList();
            }).catch(error => {
              console.error("新增失败:", error);
              this.$message.error("新增失败，请重试");
            });
          }
        }
      });
    },
    handleDelete(row) {
      // 处理单行删除和批量删除的情况
      const furnitureIds = row ? [row.furnitureId] : this.ids;
      if (furnitureIds.length === 0) {
        this.$message.warning("请选择需要删除的记录");
        return;
      }
      
      this.$confirm(`是否确认删除家具租赁综合编号为"${furnitureIds.join(',')}"的数据项？`).then(() => {
        return delRental(furnitureIds);
      }).then(() => {
        this.getList();
        this.$message.success("删除成功");
      }).catch(() => {
        // 取消删除或删除失败时的处理
      });
    },
    handleExport() {
      if (typeof this.download === 'function') { // 检查download方法是否存在
        this.download('find/rental/export', {
          ...this.queryParams
        }, `rental_${new Date().getTime()}.xlsx`);
      } else {
        console.error("下载方法不存在");
        this.$message.error("导出功能暂不可用");
      }
    },
    // 详情弹窗相关方法
    openDetail(row) {
      if (!row) {
        this.$message.warning("请选择有效的记录");
        return;
      }
      
      // 组装详情数据
      this.detailForm = {
        ...row,
        rentPriceYear: (row.rentPrice || 0) * 12,
        size: `${row.length || 0}*${row.width || 0}*${row.height || 0} cm`,
        rentSpec: '请选择租赁期限'
      };
      
      // 处理图片数据
      this.handleImageData(row.imageUrls, row.imageDescs);
      
      this.detailOpen = true;
      this.activeTab = "base";
      this.selectedSpec = 1;
    },
    // 处理图片URL和描述
    handleImageData(urls, descs) {
      this.imageList = [];
      if (!urls) return;
      
      try {
        const urlList = urls.split(',');
        const descList = descs ? descs.split(',') : [];
        
        urlList.forEach((url, index) => {
          if (url && url.trim()) {
            this.imageList.push({
              url: url.trim(),
              desc: descList[index] ? descList[index].trim() : ''
            });
          }
        });
      } catch (error) {
        console.error("处理图片数据失败:", error);
        this.imageList = [];
      }
    },
    // 确认租赁规格选择
    confirmSpec() {
      this.detailForm.rentSpec = `租期${this.selectedSpec}年`;
      this.$message.success(`已选择租期${this.selectedSpec}年`);
      this.activeTab = "fee";
    },
    // 计算总费用
    calculateTotalFee() {
      const deposit = Number(this.detailForm.deposit) || 0;
      const rentPrice = Number(this.detailForm.rentPrice) || 0;
      const deliveryFee = Number(this.detailForm.deliveryFee) || 0;
      const maintenanceFee = Number(this.detailForm.maintenanceFee) || 0;
      
      return deposit + 
             (rentPrice * 12 * this.selectedSpec) + 
             deliveryFee + 
             (maintenanceFee * 12 * this.selectedSpec);
    },
    // 生成订单
    generateOrder() {
      this.$confirm(`确认生成租期${this.selectedSpec}年的订单吗？总费用为${this.calculateTotalFee()}元`).then(() => {
        // 这里可以添加生成订单的逻辑
        this.$message.success('订单已生成，即将跳转到支付页面');
        // 模拟跳转支付
        setTimeout(() => {
          this.detailOpen = false;
        }, 1000);
      });
    },
    // 预览图片
    previewImage(url) {
      if (url) {
        this.previewImageUrl = url;
        this.previewVisible = true;
      }
    },
    // 关闭详情弹窗时重置
    handleDetailClose() {
      this.previewVisible = false;
      this.detailOpen = false;
    }
  },
  // 确保parseTime方法可用
  filters: {
    parseTime(time, pattern) {
      return parseTime(time, pattern);
    }
  }
};
</script>

<style scoped>
/* 全局样式重置与基础设置 */
.app-container {
  padding: 20px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

/* 搜索区域样式 */
.search-container {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.search-container:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
}

/* 搜索表单样式 */
.search-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

.search-form .el-form-item__label {
  color: #333;
  font-weight: 500;
}

.search-form .el-input {
  border-radius: 6px;
  transition: all 0.3s;
}

.search-form .el-input:focus-within {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* 搜索按钮组 */
.search-buttons {
  margin-top: 20px;
  text-align: right;
}

.search-buttons .el-button {
  margin-left: 10px;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s;
}

.search-buttons .el-button--primary {
  background: linear-gradient(135deg, #409eff, #66b1ff);
  border: none;
}

.search-buttons .el-button--primary:hover {
  background: linear-gradient(135deg, #66b1ff, #8cc5ff);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

/* 操作栏样式 */
.operation-bar {
  background: white;
  border-radius: 12px;
  padding: 15px 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

/* 主操作按钮组 */
.main-actions {
  display: flex;
  gap: 10px;
}

.main-actions .el-button {
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.3s;
  border: none;
}

.main-actions .el-button--primary {
  background: linear-gradient(135deg, #409eff, #66b1ff);
}

.main-actions .el-button--primary:hover {
  background: linear-gradient(135deg, #66b1ff, #8cc5ff);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.main-actions .el-button--danger {
  background: linear-gradient(135deg, #f56c6c, #f88f8f);
}

.main-actions .el-button--danger:hover {
  background: linear-gradient(135deg, #f88f8f, #fababa);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
}

.main-actions .el-button--default {
  background: linear-gradient(135deg, #f0f2f5, #e6e8eb);
  color: #606266;
}

.main-actions .el-button--default:hover {
  background: linear-gradient(135deg, #e6e8eb, #dcdfe6);
  color: #404245;
  transform: translateY(-1px);
}

/* 右侧工具栏 */
.right-tools {
  display: flex;
  gap: 10px;
}

/* 表格样式 */
.data-table {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 20px;
}

.data-table .el-table {
  border-radius: 12px;
}

.data-table .el-table__header th {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  font-weight: 600;
  color: #333;
  border-bottom: none;
}

.data-table .el-table__body tr {
  transition: all 0.3s;
}

.data-table .el-table__body tr:hover > td {
  background-color: #f0f7ff;
}

.data-table .el-table__body tr.current-row > td {
  background-color: #e6f7ff;
}

.data-table .el-table__empty-block {
  min-height: 300px;
}

/* 状态标签样式 */
.status-tag {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.status-tag.active {
  background: #f0f9ff;
  color: #00b42a;
  border: 1px solid #e1f3d8;
}

.status-tag.inactive {
  background: #f5f5f5;
  color: #909399;
  border: 1px solid #ebeef5;
}

/* 表格操作按钮 */
.table-actions {
  display: flex;
  gap: 8px;
}

.table-actions .el-button {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 4px;
  transition: all 0.3s;
}

.detail-btn {
  color: #409eff;
  border-color: #409eff;
}

.detail-btn:hover {
  background-color: #f0f7ff;
  transform: translateY(-1px);
}

/* 分页控件样式 */
.pagination-container {
  background: white;
  border-radius: 12px;
  padding: 15px 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.pagination-container .el-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-container .el-pagination__total {
  color: #606266;
}

.pagination-container .el-pagination__sizes .el-input .el-input__inner {
  border-radius: 6px;
}

.pagination-container .el-pagination__jump .el-input .el-input__inner {
  border-radius: 6px;
  margin: 0 5px;
}

.pagination-container .el-pagination button {
  border-radius: 6px;
  transition: all 0.3s;
}

.pagination-container .el-pagination button:hover {
  background-color: #f0f7ff;
  color: #409eff;
}

.pagination-container .el-pagination .el-pager li {
  border-radius: 6px;
  margin: 0 3px;
  transition: all 0.3s;
}

.pagination-container .el-pagination .el-pager li:hover {
  background-color: #f0f7ff;
  color: #409eff;
  transform: translateY(-1px);
}

.pagination-container .el-pagination .el-pager li.active {
  background: linear-gradient(135deg, #409eff, #66b1ff);
  color: white;
}

/* 详情弹窗样式 */
.detail-dialog {
  .el-dialog {
    border-radius: 12px;
    overflow: hidden;
  }
  
  .el-dialog__header {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-bottom: none;
    padding: 20px 24px;
  }
  
  .el-dialog__title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
  
  .el-dialog__body {
    padding: 24px;
  }
  
  .el-tabs {
    margin-top: 10px;
  }
  
  .el-tabs__header {
    margin-bottom: 20px;
  }
  
  .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #e4e7ed;
  }
  
  .el-tabs__item {
    font-size: 14px;
    font-weight: 500;
    color: #606266;
    padding: 12px 20px;
    transition: all 0.3s;
  }
  
  .el-tabs__item:hover {
    color: #409eff;
  }
  
  .el-tabs__item.is-active {
    color: #409eff;
    font-weight: 600;
  }
  
  .el-tabs__active-bar {
    background: linear-gradient(90deg, #409eff, #66b1ff);
    height: 3px;
    border-radius: 3px;
  }
  
  .el-tabs__content {
    padding: 10px 0;
  }
}

/* 基础信息样式 */
.detail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.detail-column {
  flex: 1;
  min-width: 300px;
}

.detail-item {
  display: flex;
  margin-bottom: 16px;
  line-height: 1.8;
  padding: 5px 0;
}

.detail-label {
  width: 120px;
  color: #606266;
  text-align: right;
  padding-right: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.detail-value {
  flex: 1;
  word-break: break-all;
  color: #303133;
  font-weight: 500;
}

.font-bold {
  font-weight: 600;
  color: #1f2329;
}

/* 详情板块样式 */
.detail-section {
  margin-top: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
  transition: all 0.3s;
}

.detail-section:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.section-title {
  margin-bottom: 15px;
  color: #1f2329;
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e6eb;
}

.description-content {
  line-height: 1.8;
  color: #303133;
  white-space: pre-wrap;
  padding: 10px;
  background-color: white;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

/* 图片展示样式 */
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 15px 0;
}

.image-item {
  width: 220px;
  text-align: center;
  transition: all 0.3s;
}

.image-item:hover {
  transform: translateY(-5px);
}

.preview-img {
  width: 100%;
  height: 180px;
  cursor: pointer;
  border-radius: 8px;
  background-color: #f5f5f5;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.preview-img:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.image-placeholder {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  color: #909399;
  font-size: 28px;
  border-radius: 8px;
  border: 2px dashed #dcdfe6;
  transition: all 0.3s;
}

.image-placeholder:hover {
  border-color: #c0c4cc;
  background-color: #f0f2f5;
}

.image-desc {
  margin-top: 12px;
  color: #606266;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.no-image {
  width: 100%;
  padding: 60px 0;
  text-align: center;
  color: #909399;
}

.no-image i {
  font-size: 56px;
  margin-bottom: 15px;
  display: inline-block;
  opacity: 0.6;
}

/* 图片预览弹窗 */
.image-preview-dialog {
  padding: 0 !important;
}

.image-preview-dialog .el-dialog__body {
  padding: 0;
}

.preview-img-large {
  max-height: 80vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* 租赁规格样式 */
.spec-container {
  padding: 20px;
}

.spec-group {
  margin-bottom: 25px;
}

.spec-item {
  display: block;
  margin-bottom: 12px;
  padding: 16px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  background-color: white;
}

.spec-item:hover {
  border-color: #c0c4cc;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.spec-item.is-checked {
  border-color: #409eff;
  background-color: #f0f7ff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.spec-text {
  display: inline-block;
  width: 140px;
  font-size: 15px;
  font-weight: 500;
  color: #303133;
}

.spec-price {
  color: #f56c6c;
  font-weight: 600;
  font-size: 16px;
}

.spec-extra-info {
  margin: 25px 0;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.info-item {
  margin-bottom: 10px;
  color: #606266;
  font-size: 14px;
  padding: 5px 0;
}

.info-item i {
  color: #409eff;
  margin-right: 8px;
}

.spec-confirm-btn {
  margin-top: 15px;
  text-align: center;
}

.spec-confirm-btn .el-button {
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s;
  background: linear-gradient(135deg, #409eff, #66b1ff);
  border: none;
}

.spec-confirm-btn .el-button:hover {
  background: linear-gradient(135deg, #66b1ff, #8cc5ff);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.3);
}

/* 费用明细样式 */
.fee-container {
  padding: 20px;
}

.fee-item {
  display: flex;
  margin-bottom: 16px;
  padding: 10px 0;
  line-height: 1.8;
  align-items: center;
}

.fee-label {
  width: 140px;
  color: #606266;
  font-size: 14px;
}

.fee-value {
  flex: 1;
  font-size: 14px;
  color: #303133;
}

.fee-divider {
  border-top: 2px dashed #eee;
  margin-top: 20px;
  padding-top: 20px;
}

.total-fee {
  color: #f56c6c;
  font-weight: 600;
  font-size: 18px;
}

.pay-btn {
  margin-top: 25px;
  text-align: center;
}

.pay-btn .el-button {
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s;
  background: linear-gradient(135deg, #f56c6c, #f88f8f);
  border: none;
}

.pay-btn .el-button:hover {
  background: linear-gradient(135deg, #f88f8f, #fababa);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 108, 108, 0.3);
}

/* 租赁规则样式 */
.rules-container {
  padding: 20px;
}

.rule-section {
  margin-bottom: 25px;
  padding: 15px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
}

.rule-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.rule-title {
  margin-bottom: 15px;
  color: #1f2329;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
}

.rule-title:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 20px;
  background: linear-gradient(135deg, #409eff, #66b1ff);
  margin-right: 10px;
  border-radius: 3px;
}

.rule-content {
  margin-bottom: 8px;
  color: #303133;
  line-height: 1.8;
  padding-left: 15px;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-container {
    padding: 10px;
  }
  
  .search-form {
    grid-template-columns: 1fr;
  }
  
  .operation-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .main-actions {
    justify-content: center;
  }
  
  .right-tools {
    justify-content: center;
  }
  
  .pagination-container {
    flex-direction: column;
    gap: 15px;
  }
  
  .detail-grid {
    flex-direction: column;
  }
  
  .detail-item {
    flex-direction: column;
  }
  
  .detail-label {
    text-align: left;
    padding-right: 0;
    margin-bottom: 5px;
  }
  
  .image-item {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .search-buttons {
    display: flex;
    flex-direction: column;
  }
  
  .search-buttons .el-button {
    margin-left: 0;
    margin-bottom: 10px;
  }
  
  .main-actions {
    flex-direction: column;
  }
  
  .el-pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style>
